/* dashboard */
import React, { PureComponent, useState } from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import DashboardLeft from './Components/DashboardLeft';
import DashboardRight from './Components/DashboardRight';
import StudentDashboard from './Components/StudentDashboard';
import { Row, Col, Card, Button, Modal } from 'antd';
import Authorized from '../../components/Authorized/Authorized'
import { history } from 'umi'
import { recordFirstLogin } from '@/services/login'
import { isXinhua } from '@/utils/utils'
class Index extends PureComponent<any, any> {
    constructor(props: any) {
        super(props);

        this.state = {
            teachVisible: false,
            downVisible: false,
        }
    }


    showVideo = () => {
        this.setState({
            teachVisible: true
        })
    }
    showDownLoad = () => {
        this.setState({
            downVisible: true
        })
    }

    componentWillMount() {
        const uid = localStorage.getItem('id');
        if (!uid) {
            history.push('/user/login')
        }
    }
    componentDidMount() {
        const userinfo = JSON.parse(localStorage.getItem('userinfo') || '{}');
        const first = userinfo.first
        if (!first) {
            this.setState({
                teachVisible: true
            })
            recordFirstLogin({ id: userinfo.id }).then(() => {
                userinfo.first = 1;
                localStorage.setItem('userinfo', JSON.stringify(userinfo))
            });
        }
    }
    render() {
        const uid = localStorage.getItem('id');
        const host = window.location.host;
        const author = localStorage.getItem('antd-pro-authority') !== `["2"]`;
        const { teachVisible, downVisible } = this.state

        return (
            <PageContainer title={
                <div>首页 {
                    author ?
                        <Button type="primary" style={{ marginLeft: 20, backgroundColor: "#fda63f", borderColor: "#fda63f" }} onClick={this.showVideo}>操作教程</Button>
                        :
                        <Button type="primary" size="large" style={{ marginLeft: 20, backgroundColor: "#fda63f", borderColor: "#fda63f" }} onClick={this.showVideo}>操作指南</Button>

                }
                     {
                   isXinhua() && author ?<div></div>
                        :
                        <Button type="primary" size="large" style={{ marginLeft: 20, backgroundColor: "blue", borderColor: "#fda63f" }} onClick={this.showDownLoad}>文件下载</Button>

                }

                </div>
            }>
                {
                    uid && <React.Fragment>
                        <Authorized authority={[101, 102, 103, 104, 105, 106, 107, 108, 109,
                            201, 202, 203, 204,
                            301, 302, 303, 304, 305, 306, 307, 308,
                            901, 902, 903, 904, 905, 906, 907, 908, 909,
                            99991, 99992, 99993, 99994, 99996,
                            99997, 99998, 99999, 999990, 999991, 999992, 999993,
                        ]}>
                            <Row gutter={10}>
                                <Col span={12}> <Card><DashboardLeft /></Card> </Col>
                                <Col span={12}> <Card><DashboardRight /></Card> </Col>
                            </Row>
                        </Authorized>
                        <Authorized authority="2">
                            <StudentDashboard params={this.props.location.query} />
                        </Authorized>
                    </React.Fragment>
                }
                <Modal width={900} visible={teachVisible} footer={null} onCancel={() => this.setState({ teachVisible: false })}>
                    {teachVisible && <video controls autoPlay style={{ width: '100%', height: 500 }} src={
                        author ? "https://www.shejiyuan.com/Public/images/admin_teach.m4v" : "https://www.shejiyuan.com/Public/images/exam_teach.m4v"
                    }></video>}
                </Modal>

                <Modal width={900} visible={downVisible} footer={null} onCancel={() => this.setState({ downVisible: false })}>
                    <a href="https://www.shejiyuan.com/Public/images/FileDolwn/A22特种作业资格考试申请、发证审批（学员登记）表.xlsx" download="A22特种作业资格考试申请、发证审批（学员登记）表.xlsx">
                        <div>A22特种作业资格考试申请、发证审批（学员登记）表</div>
                    </a>
                    <a href="https://www.shejiyuan.com/Public/images/FileDolwn/个人健康承诺.docx" download="个人健康承诺.docx">
                        <div>个人健康承诺.docx</div>
                    </a>
                    <a href="https://www.shejiyuan.com/Public/images/FileDolwn/安全生产资格考试与证书办理申请表(2).docx" download="安全生产资格考试与证书办理申请表(2).docx">
                        <div>安全生产资格考试与证书办理申请表</div>
                    </a>
                    <a href="https://www.shejiyuan.com/Public/images/FileDolwn/./特种作业人员无违法违章行为证明.docx" download="特种作业人员无违法违章行为证明.docx">
                        <div>特种作业人员无违法违章行为证明.docx</div>
                    </a>
                </Modal>

            </PageContainer>
        );
    }
}

export default Index;
